<template>
  <view v-if="show" class="mxp-notice-bar" :style="[{ backgroundColor: newBackground }, cusStyle]">
    <template v-if="direction === 'column' || (direction === 'row' && step)">
      <mxp-notice-column
        :color="newColor"
        :text="text"
        :iconType="iconType"
        :step="step"
        :showIcon="showIcon"
        :disableTouch="disableTouch"
        :disableScroll="disableScroll"
        :fontSize="fontSize"
        :duration="duration"
        @close="onClose"
        @click="onClick"
        @change="onChange"
      ></mxp-notice-column>
    </template>
    <template v-else>
      <mxp-notice-row
        :color="newColor"
        :text="text"
        :fontSize="fontSize"
        :iconType="iconType"
        :speed="speed"
        :showIcon="showIcon"
        @close="onClose"
        @click="onClick"
      ></mxp-notice-row>
    </template>
  </view>
</template>

<script lang="ts" setup>
  import { type PropType, computed, ref } from 'vue';
  import MxpNoticeColumn from './components/mxp-notice-column.vue';
  import MxpNoticeRow from './components/mxp-notice-row.vue';
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import type { $AllColorStr, $ColorType, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  defineOptions({
    name: 'mxp-notice-bar',
  });

  const props = defineProps({
    /** 显示的内容，数组 */
    text: { type: [Array, String] as PropType<string[] | string>, default: '' },
    /** 通告滚动模式，row-横向滚动，column-竖向滚动 */
    direction: { type: String as PropType<'column' | 'row'>, default: 'row' },
    /** direction = row时，是否使用步进形式滚动 */
    step: { type: Boolean, default: false },
    /** 是否显示左侧的音量图标 */
    showIcon: { type: Boolean, default: true },
    /** 右侧图标  arrows-显示右箭头，close-显示关闭图标，none-不显示图标 */
    iconType: { type: String as PropType<'arrows' | 'close' | 'none'>, default: 'close' },
    /** 主题，支持 "error" | "info" | "primary" | "success" | "warning" */
    theme: { type: String as PropType<$ColorType>, default: undefined },
    /** 文字颜色，各图标也会使用文字颜色 */
    color: { type: String as PropType<$AllColorStr>, default: undefined },
    /** 自定义背景颜色 */
    background: { type: String as PropType<$AllColorStr | `linear-gradient(${string})`>, default: undefined },
    /** 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 */
    speed: { type: Number, default: 80 },
    /** 字体大小 */
    fontSize: { type: String as PropType<$SizeUnitStr>, default: '14px' },
    /** 滚动一个周期的时间长，单位ms */
    duration: { type: Number, default: 2000 },
    /** 是否禁止用手滑动切换 */
    disableTouch: { type: Boolean, default: true },
    /** 是否禁止滚动，仅`direction="column"生效` */
    disableScroll: { type: Boolean, default: false },
    ...publicStyeProps,
  });

  const emits = defineEmits<{
    (e: 'click', index: number): void;
    (e: 'close'): void;
    (e: 'change', index: number): void;
  }>();

  const optionsObj: Record<$ColorType, { color: $AllColorStr; background: $AllColorStr; icon: string }> = {
    error: { color: '#F56C6C', background: '#fef0f0', icon: 'guanbi1' },
    warning: { color: '#E6A23C', background: '#fdf6ec', icon: 'jinggao' },
    success: { color: '#67C23A', background: '#dbf1e1', icon: 'queding' },
    primary: { color: '#223aec', background: '#ecf5ff', icon: 'jinggao' },
    info: { color: '#333333', background: '#909399', icon: 'jinggao' },
  };

  const newBackground = computed(() => {
    if (props.theme && props.theme in optionsObj) {
      return optionsObj[props.theme as keyof typeof optionsObj].background;
    } else {
      return props.background || optionsObj.warning.background;
    }
  });
  const newColor = computed(() => {
    if (props.theme && props.theme in optionsObj) {
      return optionsObj[props.theme as keyof typeof optionsObj].color;
    } else {
      return props.color || optionsObj.warning.color;
    }
  });

  const show = ref(true);

  /** 点击通告栏 */
  function onClick(index: number) {
    emits('click', index);
  }

  /** 点击关闭按钮 */
  function onClose() {
    show.value = false;
    emits('close');
  }

  /** 竖向滚动时触发 */
  function onChange(index: number) {
    emits('change', index);
  }
</script>

<style lang="scss" scoped>
  .mxp-notice-bar {
    flex: 1;
    padding: 9px 12px;
    overflow: hidden;
  }
</style>
